<template>
	<view class="wrap" :style="colorStyle">
		<view class="tipsTxt">请填写与实名认证支付宝名字一致，否则审核付款不通过</view>
		
		<block v-if="playType == 1">
			<view class="input-box">
				<view class="li">
					<view class="name">持卡人</view>
					<view class="value">
						<input placeholder="请输入持卡人" type="text" disabled v-model="bankCardData.card_username" />
					</view>
				</view>
				<!-- <view class="li">
					<view class="name">联系电话</view>
					<view class="value">
						<input placeholder="请输入联系电话" type="number" maxlength="11" v-model="bankCardData.card_phone" />
					</view>
				</view> -->
				<view class="li">
					<view class="name">银行名称</view>
					<view class="value">
						<input placeholder="请输入银行名称" type="text" maxlength="11" v-model="bankCardData.bank_name" />
					</view>
			
				</view>
				<view class="li">
					<view class="name">卡号</view>
					<view class="value">
						<input placeholder="请填写卡号" type="text" v-model="bankCardData.card_number" />
					</view>
				</view>
				<view class="list flex_s" @click="defaultAdd">
					<view class="img_box">
						<image :src="imgSrc+'check2.png'" v-if="bankCardData.is_default"></image>
						<image :src="imgSrc+'check1.png'" v-else></image>
					</view>
					设置为默认
				</view>
			</view>
			
			<view class="btn-d" @click="bankcard_set">
				<view class="btn">确定保存</view>
			</view>
		</block>
		
		<block v-else>
			<view class="input-box">
				<view class="li">
					<view class="name">姓名</view>
					<view class="value">
						<input placeholder="请输入姓名" type="text" disabled v-model="alipayData.alipay_name" />
					</view>
				</view>
				<!-- <view class="li">
					<view class="name">联系电话</view>
					<view class="value">
						<input placeholder="请输入联系电话" type="number" maxlength="11" v-model="alipayData.card_phone" />
					</view>
				</view> -->
				<view class="li">
					<view class="name">支付宝账户</view>
					<view class="value">
						<input placeholder="请输入支付宝账户" type="text" maxlength="20" v-model="alipayData.alipay_number" />
					</view>
			
				</view>
				<view class="list flex_s" @click="defaultAdd">
					<view class="img_box">
						<image :src="imgSrc+'check2.png'" v-if="bankCardData.is_default"></image>
						<image :src="imgSrc+'check1.png'" v-else></image>
					</view>
					设置为默认
				</view>
			</view>
			<view class="btn-d" @click="aliapy_set">
				<view class="btn">确定保存</view>
			</view>
		</block>
		<!-- 省市区 -->
		<!-- <cityPicker :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel"
			:visible="showAddress" /> -->
	</view>
</template>
<script>
	import colors from "@/mixins/color";
	import {
		debounceImmediate
	} from "@/utils/validate";
	// 导入省市区组件
	// import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		edit,
		card_detail
	} from "@/api/new_api.js";
	import {postAddAlipay,getAlipayOne} from '@/api/new_store.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		mixins: [colors],
		components: {
			// cityPicker
		},
		data() {
			return {
				imgSrc:this.$imgSrc,
				code: '',
				alterMain: false,
				bankCardData: {
					is_default: false,
					card_username: '', //持卡人
					card_phone: '', //联系电话
					bank_name: '', //中国银行
					card_number: '', //银行卡号
					id: '',
					type: 0
				},
				alipayData:{
					alipay_name: "",
					alipay_number: "",
					card_phone:'',
					// b_id: '',
					is_default:0
				},
				alipayPhone:'',
				showAddress: false,
				defaultValue: ['', '', ''],
				maskCloseAble: true, //点击模态框是否关闭弹框
				p_c_a: '',
				navigatorHeight: '',
				playType:''
			};
		},
		computed: mapGetters(['userInfo']),
		onLoad(option) {
			this.playType = option.playType
			this.bankCardData.card_username = this.userInfo.real_name
			this.alipayData.alipay_name = this.userInfo.real_name
			
			if (option.playType == 1) {
				if(option.id) {
					this.bankCardData.type = 1
					this.bankCardData.id = option.id
					this.card_detail()
				}
				uni.setNavigationBarTitle({
					title: option.id ? '编辑银行卡' : "添加银行卡"
				})
			}
			
			if(option.playType == 0) {
				uni.setNavigationBarTitle({
					title: option.id ? '编辑支付宝' : "添加支付宝"
				})
				if (!option.id) return
				this.getAlipayOneFc(option.id)
			}
		},
		methods: {
			
			card_detail(code) {
				const params = {
					id: this.bankCardData.id
				}
				card_detail(params).then((res) => {
					const data = res.data
					this.bankCardData = data

				})
			},


			defaultAdd() {
				this.bankCardData.is_default = !this.bankCardData.is_default
			},
			
			bankcard_set: debounceImmediate(function() {
				if (!this.bankCardData.card_username) return this.$util.Tips({
					title: '请输入持卡人姓名'
				})
				// if (!this.bankCardData.card_phone) return this.$util.Tips({
				// 	title: '请输入联系电话'
				// })
				if (!this.bankCardData.bank_name) return this.$util.Tips({
					title: '请输入银行名称'
				})
				if (!this.bankCardData.card_number) return this.$util.Tips({
					title: '请输入卡号'
				})

				edit({...this.bankCardData, is_default: Number(this.bankCardData.is_default)}).then((res) => {
					this.$util.Tips({
						title: '更新成功'
					}, {tab: 3, url: 1})
				}).catch((err) => {
					uni.$u.toast(err)
				})
			}),
			// 查询支付宝信息
			getAlipayOneFc(userId) {
				let obj = {b_id:userId}
				let that = this
				getAlipayOne(obj).then(res => {
					that.alipayData.card_phone = res.data.card_phone
					that.alipayData.alipay_name = res.data.alipay_name
					that.alipayData.alipay_number = res.data.alipay_number
					// that.alipayData.b_id = 10
					that.bankCardData.is_default = res.data.is_default == 1 ? true : false
				})
			},
			// 增加支付宝账号
			aliapy_set: debounceImmediate(function() {
				if (!this.alipayData.alipay_name) return this.$util.Tips({
					title: '请输入姓名'
				})
				// if (!this.alipayData.card_phone) return this.$util.Tips({
				// 	title: '请输入电话号码'
				// })
				if (!this.alipayData.alipay_number) return this.$util.Tips({
					title: '请输入支付宝账号'
				})
				
				this.alipayData.is_default = this.bankCardData.is_default ? 1 : 0
				postAddAlipay(this.alipayData).then((res) => {
					this.$util.Tips({
						title: '更新成功'
					}, {tab: 3, url: 1})
				}).catch((err) => {
					uni.$u.toast(err)
				})
			}),
			
			
			confirm(val) {
				console.log(val, "sljdkfjskdjfk");
				this.showAddress = false
				this.bankCardData.province = val.provinceName
				this.bankCardData.city = val.cityName
				this.bankCardData.area = val.areaName
				this.p_c_a = this.adressFormat(val.provinceName, val.cityName, val.areaName)

			},
			adressFormat(province, city, district) {
				let addressArr = []
				addressArr.push(province)
				addressArr.push(city)
				addressArr.push(district)
				return addressArr.join(',')
			},
			cancel() {
				this.showAddress = false
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	};
</script>
<style lang="scss" scoped>
	.wrap {
		overflow: hidden;
		width: 750rpx;
		min-height: 100vh;
		position: relative;
		background-color: #F6F7FB;
		padding-bottom: 200rpx;
		
		.tipsTxt {
			width: 600rpx;
			height: 35rpx;
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 34.75rpx;
			color: rgba(212, 48, 48, 1);
			text-align: center;
			vertical-align: top;
			margin: 38rpx auto 0;
		}

		.nav_box {

			background: #fff;

			.nav_info {
				height: 88rpx;
				flex-grow: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 27rpx;
				font-size: 30rpx;
				.back_icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 32rpx;
					height: 32rpx;

					.iconfont {
						font-size: 26rpx;
					}
				}

				.sys_title {
					color: #383838;
					text-align: center;
				}
			}

		}

		.input-box {
			width: 700rpx;
			border-radius: 20rpx;
			background: white;
			margin: 20rpx auto;
			overflow: hidden;
			padding: 0 30rpx;
			line-height: 100rpx;
			color: #3D3D3D;
			font-size: 28rpx;

			.li {
				font-size: 30rpx;
				border-bottom: solid 1rpx #F3F4F8;
				color: #333;
				.name {
					width: 25%;
					display: inline-block;
					vertical-align: top;
				}

				.value {
					width: 75%;
					display: inline-block;
					vertical-align: top;
					position: relative;

					image {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: 20rpx;
						top: 35rpx;
					}

					input {
						height: 100rpx;
					}
				}
			}

			.list {
				font-size: 28rpx;

				.img_box {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					overflow: hidden;
					line-height: 0;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}
		}

		.btn-d {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: white;
			padding: 30rpx;
			font-size: 32rpx;
			color: white;
			text-align: center;
			line-height: 90rpx;
			padding-bottom: 50rpx;

			.btn {
				border-radius: 100rpx;
				background: var(--view-theme);
			}
		}
	}
</style>